<template>
  <v-scale-screen width="1920" height="1080" :fullScreen="false">
    <div class="screen_container">
      <div class="Top flexbet">
        <div class="xtitle">综合管理平台培训系统</div>
        <div class="navs flex rela">
          <div
            :class="['nav', 'shou', activeName == item.active ? 'active' : '']"
            v-for="(item, index) in nav"
            :key="index"
            @click="tabcChange(item)"
          >
            {{ item.name }}
          </div>
          <div
            class="bottomline abso"
            :style="{ left: nav[activeName].left + 'px' }"
          ></div>
        </div>
        <div class="flex timeBox">
          <div class="time">{{ timeNow }}</div>
          <div class="a_b">
            <div class="a">{{ weekDay }}</div>
            <div class="b">{{ yearMonthDay }}</div>
          </div>
        </div>
      </div>
      <router-view></router-view>
    </div>
  </v-scale-screen>
</template>
  
  <script>
import * as echarts from "echarts";
import "echarts-gl"; // 3d图表库

import countTo from "vue-count-to";

export default {
  name: "schoolTubeScreen",
  components: {
    countTo,
  },
  data() {
    return {
      nav: [
        {
          name: "课程学习管理",
          active: 0,
          left: 17,
          path: "/dataView/courseLearningManagement",
        },
        {
          name: "训练员授课管理",
          active: 1,
          left: 190,
          path: "/dataView/trainerCourseManagement",
        },
        {
          name: "账号管理",
          active: 2,
          left: 349,
          path: "/dataView/accountManagement",
        },
        {
          name: "订单管理",
          active: 3,
          left: 479,
          path: "/dataView/orderManagement",
        },
        {
          name: "抽查管理",
          active: 4,
          left: 609,
          path: "/dataView/spotCheckManagement",
        },
        {
          name: "知识库管理",
          active: 5,
          left: 746,
          path: "/dataView/knowledgeBaseManagement",
        },
      ],
      activeName: 0,
      //   顶部时间
      timeNow: "00:00:00",
      yearMonthDay: "2023年03月25日",
      weekDay: "星期五",
      timer: null,
    };
  },
  watch: {
    //   监听路由且初始化就监听
    $route: {
      handler: function (val, oldVal) {
        console.log("route", val, oldVal);
        this.nav.map((item, index) => {
          if (item.path == val.path) {
            this.activeName = index;
          }
        });
      },
      immediate: true,
    },
  },

  mounted() {
    //时间定时器
    this.getNowDate();
    this.timer = setInterval(() => {
      this.getNowDate();
    }, 1000);
  },
  methods: {
    tabcChange(item) {
      console.log("item", item);
      this.activeName = item.active;
      this.$router.push(this.nav[this.activeName].path);
    },
    getNowDate() {
      let now = new Date();
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let date = now.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (date < 10) {
        date = "0" + date;
      }
      let daysOfWeek = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      this.weekDay = daysOfWeek[now.getDay()];
      this.yearMonthDay = `${year}年${month}月${date}日`;
      let hour = now.getHours();
      let minute = now.getMinutes();
      let second = now.getSeconds();
      if (second < 10) {
        second = "0" + second;
      }
      if (hour < 10) {
        hour = "0" + hour;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }
      this.timeNow = `${hour}:${minute}:${second}`;
    },
  },
};
</script>
<style scoped lang="scss">

.screen_container {
  background: rgb(241, 243, 247);
  width: 1920px;
  height: 1080px;
  .Top {
    width: 1920px;
    height: 80px;
    background: #f9f9f9;
    box-shadow: 0px 11px 24px -11px rgba(0, 0, 0, 0.23);
    border: 2px solid #ffffff;
    box-sizing: border-box;
    padding: 17px 36px 0 36px;
    .xtitle {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 32px;
      color: #333333;
      line-height: 45px;
      font-style: normal;
    }
    .navs {
      // 过度动画

      .nav:nth-of-type(1) {
        margin-left: 0px;
      }
      .nav {
        margin-left: 58px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 18px;
        color: #666666;
        line-height: 45px;
        font-style: normal;
      }
      .active {
        color: #ff6801;
      }
      .bottomline {
        transition: all 0.5s ease-in-out;
        bottom: 14px;
        width: 72px;
        height: 5px;
        background: linear-gradient(90deg, #ff4d03 0%, #ff9a00 100%);
        border-radius: 3px;
      }
    }
    .timeBox {
      width: 270px;
      .time {
        margin-right: 10px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 36px;
        color: #999999;
        font-style: normal;
      }
      .a_b {
        .a {
          margin-top: 4px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 14px;
          color: #999999;
          line-height: 20px;
          font-style: normal;
        }
        .b {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 14px;
          color: #999999;
          line-height: 20px;
          font-style: normal;
        }
      }
    }
  }
}
</style>
  